<template>
  <div
    class="p-5 rounded-md"
    :style="{ border: '1px solid var(--border-primary)',backgroundColor:'var(--bg-primary)' }"
  >
    <h1 class="font-bold text-2xl pb-3">{{ data.title }}</h1>
    <div v-if="hasContent">
      <el-row class="pb-3 flex items-center">
        <el-col :span="12">
          <span class="text-lg font-medium">{{ data.number }}</span>
        </el-col>
        <el-col :span="12" class="text-right">
          <img  :src="data.icon" alt="" style="width: 30px;height: 30px;display: inline-block;" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" >
          <span class="text-sm">{{ data.remarks }}</span>
        </el-col>
        <el-col :span="12" class="text-right"
          ><span class="text-sm">{{ data.total }}</span>
        </el-col>
      </el-row>
    </div>
    <slot></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  hasContent: {
    type: Boolean,
    default: true,
  },


  data: {
    type: Object,
    default: () => {},
  },
});


</script>

<style lang="scss" scoped></style>
